<template>
  <el-button
    v-if="showBtn"
    :size="size"
    :type="type"
    :plain="plain"
    :round="round"
    :circle="circle"
    :loading="loading"
    :disabled="disabled"
    :autofocus="autofocus"
    :icon="icon"
    :native-type="nativeType"
    @click="handleClick"
  >
    <slot />
  </el-button>
</template>

<script>
  import { getLocalData } from '@/utils/localStore';
  import throttle from '@/utils/throttle';

  export default {
    name: 'WfElAuthButton',
    props: {
      size: {
        type: String,
        default: undefined,
      },
      type: {
        type: String,
        default: undefined,
      },
      plain: {
        type: Boolean,
        default: false,
      },
      round: {
        type: Boolean,
        default: false,
      },
      circle: {
        type: Boolean,
        default: false,
      },
      loading: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      autofocus: {
        type: Boolean,
        default: false,
      },
      icon: {
        type: String,
        default: undefined,
      },
      nativeType: {
        type: String,
        default: 'button',
      },
      authKey: {
        type: String,
        default: undefined,
      },
      needAuth: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      hasKey() {
        const keys = getLocalData('authKeys') || [];
        return (this.authKey && !!keys[this.authKey]) || false;
      },
      showBtn() {
        return this.needAuth ? this.hasKey : true;
      },
    },
    methods: {
      handleClick: throttle(
        function (e) {
          this.$emit('click', e);
        },
        1000,
        {
          leading: true,
          trailing: false,
        }
      ),
    },
  };
</script>

<style></style>
